﻿<DemoExample Title="Bubble" RazorCode="@razorCode" CsharpCode="@csharpCode" Id="example7">
    <div class="example-desc">
        A bubble chart is used to display three dimensions of data at the same time.
        The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.
    </div>
    <div class="chart-wrapper">
        <div class="chart-container">
            <BitChart Config="_config" IsDateAdapterRequired="true" @ref="_chart" />
        </div>
    </div>
    <div class="buttons-container">
        <BitButton Style="margin:5px" Variant="BitVariant.Fill" OnClick="RandomizeData">Randomize Data</BitButton>
        <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="AddDataset">Add Dataset</BitButton>
        <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="RemoveDataset">Remove Dataset</BitButton>
    </div>
</DemoExample>